// 报表
<template>
  <el-row class="content">
    <el-row style="padding-left:30px;">
      日期范围:
      <el-date-picker class="myClass" @change="pickerChange" v-model="pickDate" type="daterange" align="left" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
      </el-date-picker>
      两周报表
    </el-row>

    <el-row style="margin-top:10px;">
      <el-table :data="list" v-loading="loading" key="listTable" header-cell-class-name='tableHeader' element-loading-text="加载中" border fit size="small">
        <el-table-column prop="open_date" label="日期" align="center" class-name="table-label" width="180px"> </el-table-column>
        <el-table-column prop="count" label="注数" align="center"> </el-table-column>
        <el-table-column prop="sum_amount" label="下注金额" align="center"> </el-table-column>
        <el-table-column prop="sum_comm" label="佣金" align="center"> </el-table-column>
        <el-table-column prop="sum_result" label="盈亏" align="center"> </el-table-column>
      </el-table>
    </el-row>

  </el-row>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { user as userMap } from '@/utils/map' // 参数映射

  export default {
    computed: {
      ...mapGetters(['memberHistory']),
      list() {
        return this.memberHistory ? Object.values(this.memberHistory) : []
      },
    },
    data() {
      return {
        loading: false,
        userMap: userMap, // 用户字段映射
        currentPage: 1,
        pageSize: 10,
        pickDate: null,
        pickerOptions: {
          shortcuts: [
            {
              text: '最近两周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              },
            },
          ],
        },
      }
    },

    // 数据格式化
    filters: {},

    async created() {
      await this.fetchData();
    },
    methods: {
      async fetchData() {
        await this.$store.dispatch('MemberOrdersHistory', {
          page: this.currentPage,
          'per-page': this.pageSize,
        })
      },
      // 当前页变化
      async pickerChange(value) {
        console.log(value)
        await this.fetchData()
      },
    },
    watch: {
      $route(to, from) {},
    },
  }
</script>
<style>
  .content {
    padding: 5px;
  }
</style>

